import { useMemMonitorData } from '@/hooks'
import { FIXED_NUM, MEMORY_UNIT } from '@shared/constants'
import ReactECharts from 'echarts-for-react'
import type { ComponentProps } from 'react'

export const MemInfoMonitor: React.FC<ComponentProps<'div'>> = (props) => {
  const { currentValue: memInfo } = useMemMonitorData()

  if (!memInfo) {
    return (
      <div
        {...props}
        className={`card bg-white/70 backdrop-blur-sm shadow-lg border border-slate-200/50 hover:shadow-xl transition-all duration-300 ${props.className || ''}`}
      >
        <div className="card-body p-6">
          <h2 className="card-title text-lg font-bold text-slate-700 mb-4 flex items-center gap-2">
            <div className="w-2 h-2 bg-gradient-to-r from-emerald-500 to-teal-500 rounded-full"></div>
            内存使用
          </h2>
          <div className="flex items-center justify-center py-8">
            <div className="loading loading-spinner loading-md text-emerald-500"></div>
          </div>
        </div>
      </div>
    )
  }

  const option = {
    title: {
      text: '内存使用情况',
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#475569' // 使用更柔和的颜色
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: (params: any) => {
        const { name, value, percent } = params
        if (name === '已用') {
          return `${name}: ${value} ${MEMORY_UNIT} (${percent.toFixed(FIXED_NUM)}%)`
        } else {
          return `${name}: ${value} ${MEMORY_UNIT} (${percent.toFixed(FIXED_NUM)}%)`
        }
      },
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      borderColor: '#e2e8f0',
      borderWidth: 1,
      textStyle: {
        color: '#475569'
      }
    },
    legend: {
      orient: 'horizontal',
      bottom: '5%',
      left: 'center',
      textStyle: {
        color: '#64748b'
      }
    },
    series: [
      {
        name: '内存使用',
        type: 'pie',
        radius: ['35%', '60%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 16,
            fontWeight: 'bold',
            color: '#475569'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          {
            value: memInfo.used,
            name: '已用',
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  { offset: 0, color: '#f87171' },
                  { offset: 1, color: '#ef4444' }
                ]
              }
            }
          },
          {
            value: memInfo.total - memInfo.used,
            name: '可用',
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  { offset: 0, color: '#34d399' },
                  { offset: 1, color: '#10b981' }
                ]
              }
            }
          }
        ]
      }
    ]
  }

  return (
    <div
      {...props}
      className={`card bg-white/70 backdrop-blur-sm shadow-lg border border-slate-200/50 hover:shadow-xl transition-all duration-300 ${props.className || ''}`}
    >
      <div className="card-body p-1">
        <div className="h-64">
          <ReactECharts
            option={option}
            style={{ height: '100%', width: '100%' }}
            opts={{ renderer: 'canvas' }}
          />
        </div>
        <div className="text-center mt-4 space-y-2">
          <div className="bg-gradient-to-r from-slate-50 to-gray-50 rounded-lg p-3">
            <div className="text-lg font-bold bg-gradient-to-r from-slate-700 to-slate-900 bg-clip-text text-transparent">
              使用率: {memInfo.usedPercent.toFixed(FIXED_NUM)}%
            </div>
            <div className="text-sm text-slate-500 mt-1 font-mono">
              {memInfo.used} {MEMORY_UNIT} / {memInfo.total} {MEMORY_UNIT}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
